import React, { useState } from 'react';
import { LineChartOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { useRequest } from 'ahooks';
import { getFetch } from '@/utils/doFetch';
import { DatePicker } from 'antd';
import bodyParse from '@/utils/bodyParse';

const { RangePicker } = DatePicker;
function DeviceUse() {
  const [params, setparams] = useState({
    start_time: moment().startOf('month'),
    end_time: moment().endOf('day'),
  });

  let res = useRequest(
    () =>
      getFetch({
        url: `/vehicle-api/charge/project_rate?start_time=${moment(params?.start_time).format(
          'YYYY-MM-DD HH:mm:ss',
        )}&end_time=${moment(params?.end_time).format('YYYY-MM-DD HH:mm:ss')}`,
      }),
    {
      refreshDeps: [params],
    },
  );

  let columnes = [
    {
      title: `小区`,
      dataIndex: 'projectName',
      key: 'projectName',
      search: false,
    },
    {
      title: '充电区',
      dataIndex: 'areaName',
      key: 'areaName',
      search: false,
    },
    {
      title: '设备号',
      dataIndex: 'code',
      key: 'code',
      search: false,
    },
    {
      title: '使用率',
      dataIndex: 'useRate',
      key: 'useRate',
      search: false,
      render: (text, row) => <span>{row.useRate}%</span>,
    },
  ];

  return (
    <div>
      <p
        className="title"
        style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', padding: 0 }}
      >
        <span>
          <LineChartOutlined style={{ paddingRight: 6 }} />
          设备使用率
        </span>
        <RangePicker
          size="small"
          style={{ height: 26 }}
          value={[params.start_time ?? moment(), params.end_time ?? moment()]}
          onChange={(val) => {
            setparams({
              start_time: val[0],
              end_time: val[1],
            });
          }}
        />
      </p>
      <ReactECharts
        style={{ height: '30vh', width: '100%' }}
        option={{
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            left: '0px',
            right: '12px',
            bottom: '0px',
            top: '12px',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: res?.data && res?.data?.data?.reportDts,
            axisLine: {
              lineStyle: {
                color: '#089eb2',
                width: 1,
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}%',
              color: '#FFF',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(8, 158, 175,0.8)',
                width: 1,
              },
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: 'rgb(253, 236, 75,0.2)',
                width: 1,
              },
            },
          },
          series: [
            {
              data: res?.data && res?.data?.data?.useRates.map(it => {
                return (it / 2) < 100 ? (it / 2) : 100
              }),
              type: 'line',
              label: {
                show: true,
                position: 'bottom',
                color: '#fff',
              },
              lineStyle: {
                color: '#fdec4b',
                width: 1,
              },
              itemStyle: {
                normal: {
                  width: 1,
                  height: 1,
                  color: '#fdec4b',
                  borderColor: '#fdec4b',
                },
              },
              areaStyle: {
                color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(253, 236, 75,0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(253, 236, 75,0)',
                  },
                ]),
              },
            },
          ],
        }}
      />
      <AutoTable
        path="/vehicle-api/charge/equipment_rate_list"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columnes}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'rows'}
        extraparams={{
          start_time: moment(params?.start_time).format('YYYY-MM-DD HH:mm:ss'),
          end_time: moment(params?.end_time).format('YYYY-MM-DD HH:mm:ss'),
        }}
      />
    </div>
  );
}

export default DeviceUse;
